<template>
  <!-- 在这里实现你的组件样式系统 -->
  <div class="app">
    <!-- 组件将在这里渲染 -->
  </div>
</template>

<script setup>
// 在这里编写组件逻辑
</script>

<style>
/* 在这里编写样式 */
</style>

<!-- 
练习要求：创建一个可配置的组件样式系统

1. 基础设置
   - 创建全局CSS变量系统
   - 实现基础样式重置
   - 定义主题相关变量
   - 设置响应式断点

2. 组件实现
   2.1 按钮组件
   - 实现基础按钮样式
   - 支持多种类型（主要、次要、危险等）
   - 支持不同尺寸
   - 支持禁用状态
   - 添加加载状态
   - 支持图标按钮

   2.2 表单组件
   - 输入框组件
   - 复选框组件
   - 单选框组件
   - 下拉选择组件
   - 表单布局组件
   - 表单验证样式

   2.3 卡片组件
   - 基础卡片
   - 带图片的卡片
   - 可操作的卡片
   - 支持加载状态
   - 支持悬浮效果

   2.4 提示组件
   - 信息提示
   - 成功提示
   - 警告提示
   - 错误提示
   - 支持关闭功能

3. 主题系统
   - 实现浅色/深色主题
   - 支持自定义主题色
   - 主题切换动画
   - 组件级别的主题定制

4. 样式隔离
   - 使用BEM命名规范
   - 实现样式作用域隔离
   - 处理样式冲突
   - CSS Module的应用

5. 响应式设计
   - 移动优先的设计理念
   - 断点系统的实现
   - 组件的响应式布局
   - 触摸设备的适配

6. 性能优化
   - CSS代码组织和复用
   - 选择器性能优化
   - 动画性能优化
   - 按需加载样式

参考实现：

1. 变量系统示例：
```css
:root {
  /* 颜色系统 */
  --primary: #1890ff;
  --success: #52c41a;
  --warning: #faad14;
  --error: #f5222d;
  
  /* 字体系统 */
  --font-size-base: 14px;
  --font-size-lg: 16px;
  --font-size-sm: 12px;
  
  /* 间距系统 */
  --spacing-unit: 4px;
  --spacing-md: calc(var(--spacing-unit) * 4);
  
  /* 圆角系统 */
  --border-radius: 4px;
  --border-radius-lg: 8px;
  
  /* 阴影系统 */
  --shadow-sm: 0 2px 4px rgba(0,0,0,0.1);
  --shadow-md: 0 4px 8px rgba(0,0,0,0.1);
}
```

2. 组件样式示例：
```css
/* 按钮基础样式 */
.btn {
  padding: var(--spacing-unit) var(--spacing-md);
  border-radius: var(--border-radius);
  font-size: var(--font-size-base);
  transition: all 0.3s;
}

/* 按钮变体 */
.btn--primary {
  background-color: var(--primary);
  color: white;
}

/* 尺寸变体 */
.btn--large {
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-md) * 2);
  font-size: var(--font-size-lg);
}
```

3. 响应式设计示例：
```css
/* 断点系统 */
@media (max-width: 768px) {
  .card {
    width: 100%;
  }
  
  .form-group {
    flex-direction: column;
  }
}
```

完成后，你的组件系统应该：
- 风格统一，可配置性强
- 支持主题切换
- 具有良好的响应式表现
- 性能优化良好
- 代码组织清晰
- 易于维护和扩展
-->
